<!--
 * @Descripttion: 联系我们
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 18:38:45
-->
<template>
  <div class="lb-website-contact">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <div style="height: 20px"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="140px"
      >
        <el-form-item label="1联系人称呼" prop="name1">
          <el-input
            v-model="subForm.name1"
            placeholder="请输入联系人"
          ></el-input>
        </el-form-item>
        <el-form-item label="1联系人号码" prop="phone1">
          <el-input
            v-model="subForm.phone1"
            placeholder="请输入联系号码"
          ></el-input>
          <lb-tool-tips
            >400电话格式：400-xxxxxxx，座机号格式：0xx-xxxxxxx</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="2联系人称呼" prop="name2">
          <el-input
            v-model="subForm.name2"
            placeholder="请输入联系人"
          ></el-input>
        </el-form-item>
        <el-form-item label="2联系人号码" prop="phone2">
          <el-input
            v-model="subForm.phone2"
            placeholder="请输入联系号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="3联系人称呼" prop="name3">
          <el-input
            v-model="subForm.name3"
            placeholder="请输入联系人"
          ></el-input>
        </el-form-item>
        <el-form-item label="3联系人号码" prop="phone3">
          <el-input
            v-model="subForm.phone3"
            placeholder="请输入联系号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司地址" prop="address">
          <el-input
            v-model="subForm.address"
            placeholder="请输入公司地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址纬度" prop="latitude">
          <el-input
            v-model="subForm.latitude"
            placeholder="请输入地址纬度"
          ></el-input>
          <lb-button
            type="primary"
            class="getLocation"
            size="mini"
            plain
            @click="showMap = true"
            >获取经纬度</lb-button
          >
        </el-form-item>
        <el-form-item label="地址经度" prop="longitude">
          <el-input
            v-model="subForm.longitude"
            placeholder="请输入地址经度"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示地图" prop="show_map">
          <el-radio-group v-model="subForm.show_map">
            <el-radio :label="0">不显示</el-radio>
            <el-radio :label="1">显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="详情是否显示地图" prop="show_map_desc">
          <el-radio-group v-model="subForm.show_map_desc">
            <el-radio :label="0">不显示</el-radio>
            <el-radio :label="1">显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('subForm')">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
    <lb-map :dialogVisible.sync="showMap" @selectedLatLng="getLatLng"></lb-map>
  </div>
</template>

<script>
import { reg } from '@/utils/reg'
export default {
  data () {
    // let regTel = (rule, value, callback) => {
    //   if (value && !/^1[3-9]\d{9}$/.test(value)) {
    //     callback(new Error('请输入合法的手机号'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      navTitle: '',
      subForm: {
        name1: '',
        phone1: '',
        name2: '',
        phone2: '',
        name3: '',
        phone3: '',
        address: '',
        latitude: '',
        longitude: '',
        show_map: 0,
        show_map_desc: 0,
        modular_id: '',
        id: ''
      },
      subFormRules: {
        name1: { required: true, message: '请输入联系人', type: 'string', trigger: 'blur' },
        phone1: { validator: reg.validateAllPhone, trigger: 'blur', noValid: true },
        phone2: { validator: reg.validateAllPhone, trigger: 'blur', noValid: true },
        phone3: { validator: reg.validateAllPhone, trigger: 'blur', noValid: true },
        address: { required: true, message: '请输入地址', type: 'string', trigger: 'blur' },
        latitude: { required: true, message: '请输入纬度', trigger: ['blur', 'change'] },
        longitude: { required: true, message: '请输入经度', trigger: ['blur', 'change'] }
      },
      showMap: false,
      flag: false
    }
  },
  created () {
    let { id, title } = this.$route.query
    this.subForm.modular_id = id
    this.navTitle = title
    this.getFormInfo()
  },
  components: {
  },
  methods: {
    getFormInfo () {
      this.$api.getWebsiteContentList({ id: this.subForm.modular_id }).then(res => {
        console.log(res)
        if (res.code === 200) {
          let data = res.data.data[0]
          if (data) {
            for (let key in this.subForm) {
              this.subForm[key] = data[key]
            }
            // this.subForm = res.data.data[0]
          }
          this.flag = res.data.data.length !== 0
        }
      })
    },
    /**
       * @method 提交表单信息
       */
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let { subForm } = this
          if (this.flag) {
            this.$api.editWebsiteContentInfo(subForm).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          } else {
            this.$api.addWebsiteContentInfo(subForm).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          }
        }
      })
    },

    /**
     * @method 返回上一页
     */
    goBack () {
      this.$router.go(-1)
    },
    /**
     * @method 确定经纬度
     */
    getLatLng (latLng) {
      this.subForm.latitude = latLng.lat
      this.subForm.longitude = latLng.lng
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-website-contact {
  .page-main {
    .el-input {
      width: 300px;
    }
  }
}
</style>
